import React from 'react'
import {
    Card,
    Form,
    Input,
    Radio,
    Button,
    Checkbox,
    Icon,
    message,
    InputNumber,
    Select,
    Switch,
    DatePicker,
    TimePicker, Upload, Modal
} from 'antd'
import  moment from 'moment'
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const TextArea = Input.TextArea;

class Register extends React.Component{
    constructor(){
        super();

        this.state ={
            previewVisible: false,
            previewImage: '',
            avatar:'',
            fileList: [{
                uid: '-1',
                name: 'xxx.png',
                status: 'done',
                url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
            }],
        }
    }
    handleCancel = () => this.setState({ previewVisible: false })

    handlePreview = (file) => {
        this.setState({
            previewImage: file.url || file.thumbUrl,
            previewVisible: true,
        });
    }
    handleChange = ({ fileList }) => this.setState({ fileList })

    handleSubmit = () => {
        let formDta = this.props.form.getFieldsValue()
        console.log(formDta)
    }
    render() {
        const {getFieldDecorator} = this.props.form
        const formItemLayout = {
            labelCol:{
                xs:24,
                sm:4
            },
            wrapperCol:{
                xs:24,
                sm:8
            }
        }
        const offsetFormItemLayout = {
            wrapperCol:{
                xs:24,
                sm:{
                    span:8,
                    offset:4
                }
            }
        }
        return <div>
            <Card title={'注册表单'}>
                <Form {...formItemLayout}>
                    <FormItem label={'用户名'} >
                        {getFieldDecorator('userName', {
                            initialValue: '',
                            rules: [
                                {
                                    required: true,
                                    message: 'Please input your username!'
                                },
                                {
                                    pattern: /^[aeiou]/,
                                    message: '名称不符合规则必须是[aeio]规则'
                                }
                            ],
                        })(
                            <Input  placeholder={"请输入用户名"}/>
                        )}
                    </FormItem>
                    <FormItem label={'密码'} >
                        {getFieldDecorator('userpwd', {
                            initialValue: '',
                        })(
                            <Input  type={'password'} placeholder={"请输入密码"}/>
                        )}
                    </FormItem>
                    <FormItem label={'性别'} >
                        {getFieldDecorator('sex', {
                            initialValue: '0',
                        })(
                            <RadioGroup>
                                <Radio value={'0'}>未知</Radio>
                                <Radio value={'1'}>男</Radio>
                                <Radio value={'2'}>女</Radio>
                            </RadioGroup>
                        )}
                    </FormItem>
                    <FormItem label={'年龄'} >
                        {getFieldDecorator('age', {
                            initialValue: '18',
                        })(
                           <InputNumber />
                        )}
                    </FormItem>
                    <FormItem label={'套餐'} >
                        {getFieldDecorator('select', {
                            initialValue: 4,
                        })(
                            <Select>
                                <Option value={1}>广西钉钉卡</Option>
                                <Option value={2}>河北钉钉卡</Option>
                                <Option value={3}>新疆切糕卡</Option>
                                <Option value={4}>内蒙古小天神</Option>
                                <Option value={5}>河北畅玩</Option>
                            </Select>
                        )}
                    </FormItem>
                    <FormItem label={'多套餐'} >
                        {getFieldDecorator('select_more', {
                            initialValue: [1, 4],
                        })(
                            <Select mode={'multiple'}>
                                <Option value={1}>广西钉钉卡</Option>
                                <Option value={2}>河北钉钉卡</Option>
                                <Option value={3}>新疆切糕卡</Option>
                                <Option value={4}>内蒙古小天神</Option>
                                <Option value={5}>河北畅玩</Option>
                            </Select>
                        )}
                    </FormItem>
                    <FormItem label={'是否已婚'} >
                        {getFieldDecorator('is_married', {
                            initialValue: true,
                            valuePropName: 'checked',
                        })(
                            <Switch/>
                        )}
                    </FormItem>
                    <FormItem label={'生日'} >
                        {getFieldDecorator('birthday', {
                            initialValue: moment('2018-08-01'),
                        })(
                            <DatePicker
                                showTime
                                format="YYYY/MM/DD HH:mm:ss"
                            />
                        )}
                    </FormItem>
                    <FormItem label={'时间点'} >
                        {getFieldDecorator('time', {
                        })(
                            <TimePicker

                            />
                        )}
                    </FormItem>
                    <FormItem label={'地址'} >
                        {getFieldDecorator('address', {
                            initialValue: '江苏省南京市'
                        })(
                            <TextArea  autosize={
                                {
                                    minRows:4,
                                    maxRows:6
                                }
                            }/>
                        )}
                    </FormItem>
                    <FormItem label={'头像'} >
                        {getFieldDecorator('avatar', {

                        })(
                            <Upload
                                action="//jsonplaceholder.typicode.com/posts/"
                                listType="picture-card"
                                fileList={this.state.fileList}
                                onChange={this.handleChange}
                                onPreview={this.handlePreview}
                            >
                                {this.state.avatar ? <img src={this.state.avatar} alt=""/> : <Icon type={'plus'} />}
                            </Upload>
                        )}
                    </FormItem>
                    <FormItem {...offsetFormItemLayout} >
                        {getFieldDecorator('agree', {

                        })(
                           <Checkbox>我已阅读协议</Checkbox>
                        )}
                    </FormItem>
                    <FormItem {...offsetFormItemLayout} >
                        <Button type={'primary'} onClick={this.handleSubmit}> 提交 </Button>
                    </FormItem>
                </Form>
                <Modal visible={this.state.previewVisible} footer={null} onCancel={this.handleCancel}>
                    <img alt="example" style={{ width: '100%' }} src={this.state.previewImage} />
                </Modal>
            </Card>
        </div>
    }
}
export default Form.create()(Register);
